// Element Plus 样式覆盖
@use './variables.scss' as *;
@use 'sass:color';

// 表格样式
.el-table {
  .el-table__header {
    th {
      background-color: $bg-color-light;
      color: $text-color-primary;
      font-weight: 600;
    }
  }

  .el-table__row {
    &:hover {
      background-color: $bg-color-light;
    }
  }
}

// 分页样式
.el-pagination {
  margin-top: $spacing-base;
  text-align: right;
}

// 表单样式
.el-form {
  .el-form-item__label {
    font-weight: 600;
    color: $text-color-primary;
  }
}

// 对话框样式
.el-dialog {
  .el-dialog__header {
    background-color: $bg-color-light;
    padding: $spacing-base $spacing-large;
    border-bottom: 1px solid $border-color-light;

    .el-dialog__title {
      font-weight: 600;
      color: $text-color-primary;
    }
  }

  .el-dialog__body {
    padding: $spacing-large;
  }

  .el-dialog__footer {
    padding: $spacing-base $spacing-large;
    border-top: 1px solid $border-color-light;
    background-color: $bg-color-light;
  }
}

// 抽屉样式
.el-drawer {
  .el-drawer__header {
    background-color: $bg-color-light;
    padding: $spacing-base $spacing-large;
    border-bottom: 1px solid $border-color-light;
    margin-bottom: 0;

    .el-drawer__title {
      font-weight: 600;
      color: $text-color-primary;
    }
  }

  .el-drawer__body {
    padding: $spacing-large;
  }
}

// 卡片样式
.el-card {
  border: 1px solid $border-color-lighter;
  box-shadow: $box-shadow-base;

  .el-card__header {
    background-color: $bg-color-light;
    border-bottom: 1px solid $border-color-light;
    font-weight: 600;
    color: $text-color-primary;
  }
}

// 标签样式
.el-tag {
  border-radius: $border-radius-base;
  font-weight: 500;
}

// 按钮样式
.el-button {
  border-radius: $border-radius-base;
  font-weight: 500;
  transition: $transition-base;

  // 修复按钮文本不显示问题
  span {
    display: inline-block !important;
    visibility: visible !important;
  }

  &.el-button--primary {
    background-color: $primary-color;
    border-color: $primary-color;
    color: #ffffff; // 确保文字颜色始终为白色

    span {
      color: #ffffff;
    }

    &:hover, &:focus, &:active {
      background-color: color.adjust($primary-color, $lightness: 10%);
      border-color: color.adjust($primary-color, $lightness: 10%);
      color: #ffffff; // 确保悬停状态下文字颜色仍为白色
    }
  }
  
  // 确保普通按钮和plain状态下的按钮文字可见
  &.is-plain {
    color: inherit; // 继承主题色
    &:hover, &:focus, &:active {
      color: $primary-color; // 悬停时使用主题色
    }
    
    span {
      color: currentColor;
    }
  }
}

// 输入框样式
.el-input {
  .el-input__inner {
    border-radius: $border-radius-base;
    transition: $transition-base;
  }
}

// 选择器样式
.el-select {
  .el-input__inner {
    border-radius: $border-radius-base;
  }
}

// 日期选择器样式
.el-date-editor {
  .el-input__inner {
    border-radius: $border-radius-base;
  }
}

// 菜单样式
.el-menu {
  border-right: none;

  .el-menu-item {
    &:hover {
      background-color: rgba($primary-color, 0.1);
      color: $primary-color;
    }

    &.is-active {
      background-color: rgba($primary-color, 0.1);
      color: $primary-color;
      border-right: 3px solid $primary-color;
    }
  }

  .el-submenu {
    .el-submenu__title {
      &:hover {
        background-color: rgba($primary-color, 0.1);
        color: $primary-color;
      }
    }
  }
}

// 面包屑样式
.el-breadcrumb {
  .el-breadcrumb__item {
    .el-breadcrumb__inner {
      color: $text-color-regular;
      font-weight: 500;

      &:hover {
        color: $primary-color;
      }
    }

    &:last-child {
      .el-breadcrumb__inner {
        color: $text-color-primary;
        font-weight: 600;
      }
    }
  }
}
